<template>
  <div id="mine">
    <section class="banner">
       <router-link
         class="left"
         to="/mine/mine-profit"
         tag="div">
         <img
           v-if="info.picture !== 'null'"
           :src="info.picture"
           alt="">
         <img
           src="../../assets/images/mine/icon-avatar.png"
           v-else
           alt="">
         <div class="info">
           <h2>{{ info.name }}</h2>
           <h4>工号：{{ info.num }}</h4>
         </div>
       </router-link>
       <router-link
         to="/mine/mine-message"
         tag="span"
         class="right">
         <img src="../../assets/images/mine/icon-mail.png" alt="">
       </router-link>
     </section>

    <section class="achievement">
      <header class="this-public-gap this-public-header">
        <h2>我的业绩</h2>
        <router-link :to="achievement.link" tag="a">
          查看全部 >
        </router-link>
      </header>
      <div class="content">
        <article v-for="(item, index) in achievement.list" :key="index">
          <div class="grade">{{ item.grade + '万' }}</div>
          <div class="name">{{ item.name }}</div>
        </article>
      </div>
    </section>

    <section class="orders">
      <header class="this-public-gap this-public-header">
        <h2>我的询单</h2>
        <router-link to="/mine/mine-orders?type=all" tag="a">查看全部 ></router-link>
      </header>
      <div class="content">
        <router-link
          tag="a"
          v-for="(item, index) in ordersType"
          :to="item.link"
          :key="index">
          <i></i>
          <h4>{{ item.name }}</h4>
        </router-link>
      </div>
    </section>

    <section class="development" v-if="sustainable ">
      <ul>
        <router-link
          class="this-public-gap"
          v-for="(item, index) in development"
          :key="index"
          tag="li"
          :to="item.link">
          <a>
            <div class="left">
              <i class="menu-icon"></i>
              <span>{{ item.name }}</span>
            </div>
            <span class="right">></span>
          </a>
        </router-link>
      </ul>
    </section>

    <router-link
      class="settings"
      :to="settings.link"
      tag="section">
      <a class="this-public-gap">
        <div class="left">
          <i class="menu-icon"></i>
          <span>{{ settings.name }}</span>
        </div>
        <div class="right">></div>
      </a>
    </router-link>

    <!-- 底部导航栏 -->
    <comp-footer></comp-footer>
  </div>
</template>

<script>
  import CompFooter from '../comp/comp-footer.vue';
  export default {
    name: 'mine',
    components: {
      CompFooter
    },
    data() {
      return {
        info: {
          picture: localStorage.getItem('avatar'),
          name: localStorage.getItem('user_login'),
          num: localStorage.getItem('job_num')
        },
        achievement: {
          list: [
            {
              grade: '',
              name: '本日业绩'
            },
            {
              grade: '',
              name: '本月业绩'
            },
            {
              grade: '',
              name: '本年业绩'
            }
          ],
          link: '/mine/mine-achievement'
        },
        ordersType: [
          {
            name: '到期',
            link: '/mine/mine-orders?type=overdue'
          },
          {
            name: '待处理',
            link: '/mine/mine-orders?type=pending'
          },
          {
            name: '待核对',
            link: '/mine/mine-orders?type=checking'
          },
          {
            name: '待支付',
            link: '/mine/mine-orders?type=paying'
          }
        ],
        development: [
          {
            name: '我的团队架构',
            link: '/mine/mine-team'
          },
          {
            name: '我的团队业绩',
            link: '/mine/mine-team-achievement'
          },
          {
            name: '我的邀请',
            link: '/mine/mine-invite'
          }
        ],
        sustainable: localStorage.getItem('qrcode_url') !== '' && localStorage.getItem('qrcode_url') !== 'null',
        settings: {
          name: '设置',
          link: '/mine/mine-set'
        }
      }
    },
    created() {
      this.$http.post({
        api: this.$api.USER_ACHIEVEMENT,
        params: {
          user_id: localStorage.getItem('id')
        },
        success: (res) => {
          this.achievement.list[0].grade = res.data.data.day;
          this.achievement.list[1].grade = res.data.data.month;
          this.achievement.list[2].grade = res.data.data.year;
        }
      })
    }
  }
</script>

<style scoped lang="scss">

  #mine {
    padding-bottom: $comp-footer-height;

    $this-public-gap: 1rem;
    $this-public-border: 1px solid #eee;
    $this-public-header-height: 3rem;
    $this-public-header-font-size: 1.2rem;
    $this-public-header-color: #999;
    $this-public-section-margin-bottom: 1rem;
    $this-public-a-height: 4rem;

    $banner-height: 9rem;
    $banner-background: #0097ff;
    /* icon的 高 > 宽 */
    $orders-type-icon-max-side: 21px;

    .this-public-gap {
      margin-left: $this-public-gap;
      padding-right: $this-public-gap;
    }

    .this-public-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $this-public-header-height;
      border-bottom: $this-public-border;

      >h2, >a {
        font-size: $this-public-header-font-size;
        color: $this-public-header-color;
      }
    }

    >.banner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $banner-height;
      padding: 0 $this-public-gap;
      background: $banner-background;

      >.left {
        display: flex;

        >img {
          width: 6rem;
          height: 6rem;
          border-radius: 50%;
          margin-right: 1.4rem;
        }

        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          color: $white;

          >h2 {
            font-size: 1.8rem;
          }

          >h4 {
            font-size: 1.4rem;
          }
        }
      }

      >.right {
        display: block;
        width: 3rem;
        height: 3rem;

        >img {
          width: $size-as-parent;
          height: $size-as-parent;
        }
      }
    }

    >.achievement {
      height: 10rem;
      background: $white;
      border-radius: 0 0 18px 18px;
      box-shadow: $public-box-shadow-bolder;
      margin-bottom: $this-public-section-margin-bottom;

      >.content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 7rem;
        padding: 1.2rem 0;

        >article {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          height: $size-as-parent;
          font-size: 1.5rem;

          .grade {
            color: #f00;
          }

          .name {
            color: #333;
          }
        }
      }
    }

    >.orders {
      background: $white;
      margin-bottom: $this-public-section-margin-bottom;

      >.content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 7rem;

        >a {
          width: 23%;
          text-align: center;

          >i {
            display: block;
            width: $orders-type-icon-max-side;
            height: $orders-type-icon-max-side;
            margin: $margin-auto .4rem;
            background: url("../../assets/images/mine/icon-orders-type.png") no-repeat center / auto $orders-type-icon-max-side;
          }

          &:nth-of-type(1) > i {
            background-position: 0 0;
          }
          &:nth-of-type(2) > i {
            background-position: -93px 0;
          }
          &:nth-of-type(3) > i {
            background-position: -186px 0;
          }
          &:nth-of-type(4) > i {
            background-position: -280px 0;
          }

          >h4 {
            font-size: 1.5rem;
            color: #333;
          }
        }
      }
    }

    >.development {
      background: $white;
      margin-bottom: $this-public-section-margin-bottom;

      >ul {
        >li {
          height: $this-public-a-height;
          border-bottom: $this-public-border;
          &:last-of-type {
            border: none;
          }

          &:nth-of-type(1) i {
            background: url("../../assets/images/mine/icon-menu.png") no-repeat (center top) / $size-as-parent auto;
          }
          &:nth-of-type(2) i {
            background: url("../../assets/images/mine/icon-menu.png") no-repeat (center -40px) / $size-as-parent auto;
          }
          &:nth-of-type(3) i {
            background: url("../../assets/images/mine/icon-menu.png") no-repeat (center -80px) / $size-as-parent auto;
          }
        }
      }
    }

    >.settings {
      height: $this-public-a-height;
      background: $white;

      i {
        background: url("../../assets/images/mine/icon-menu.png") no-repeat (center bottom) / $size-as-parent auto;
      }
    }

    >.development a, >.settings a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $size-as-parent;

      >.left {
        display: flex;
        align-items: center;

        >.menu-icon {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: .8rem;
        }

        >span {
          font-size: 1.5rem;
          color: #333;
        }
      }

      >.right {
        color: #bababa;
        font-size: 2rem;
      }
    }
  }
</style>
